<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!--    <link rel="shortcut icon" href="" th:href="@{}">-->
    <link type="text/css" rel="stylesheet" href="../static/dist/css/bootstrap.min.css"
          th:href="@{/dist/css/bootstrap.min.css}">
    <script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <!--        <script type="text/javascript" src="../static/js/popper.min.js" th:src="@{/js/popper.min.js}"></script>-->
    <script type="text/javascript" src="../static/dist/js/bootstrap.bundle.min.js"
            th:src="@{/dist/js/bootstrap.bundle.min.js}"></script>
</head>

<body class="bg-white">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <a class="navbar-brand" href="#">通讯录管理系统</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo"
            aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo">
        <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="modal" data-target="#newContact">新建联系人</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" th:href="@{/selectAll}">刷新</a>
            </li>
        </ul>
        <form class="d-flex" th:action="@{/selectLike}">
            <input class="form-control" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-info" type="submit">Search</button>
        </form>
        <ul class="navbar-nav navbar-nav-scroll" style="max-height: 100px;">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
                   data-toggle="dropdown" aria-expanded="false">
                    <span th:text="${session.userinfo.username}"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-left dropdown-menu-lg-right"
                    aria-labelledby="navbarScrollingDropdown">
                    <a class="dropdown-item" data-toggle="modal" data-target="#updatePassword" href="#">修改密码</a>
                    <a class="dropdown-item" data-toggle="modal" data-target="#about" href="#">关于我们</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" data-toggle="modal" data-target="#sign_out" href="#">退出登录</a>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<div class="container">
    <!--  格式  -->
    <!--    <div class="row justify-content-lg-center">-->
    <!--        <div class="col-lg-12" style="margin-top: 100px"></div>-->
    <!--    </div>-->
    <!--  卡片组  -->
    <div class="row justify-content-lg-center m-5">
        <div class="card-deck">
            <div class="col-lg-4 mb-4 my-2" th:each="contact:${session.contactsList}">
                <div class="card border-dark shadow bg-light">
                    <div class="card-body bg-white">
                        <h2 class="card-title" th:text="${contact.contacts_name}"></h2>
                        <p class="invisible m-0 p-0" id="u-id">${contact.contacts_id}</p>
                        <p class="card-text border-0" id="u-phone" th:text="'电话：'+${contact.contacts_phone}"></p>
                        <p class="card-text border-0" id="u-email" th:text="'邮箱：'+${contact.contacts_email}"></p>
                    </div>
                    <div class="card-footer">
                        <button type="button" class="btn-outline-primary" data-toggle="modal"
                                data-target="#changeContact">修改
                        </button>
                        <button type="button" class="btn-outline-danger" data-toggle="modal"
                                data-target="#deleteContact">删除
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  模态框 -> 修改联系人  -->
    <div class="modal fade" id="changeContact">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改联系人</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" th:action="@{/update}" method="post">
                        <div class="form-group">
                            <input type="hidden" class="form-control" id="up-id" name="upId">
                            <!--                                   th:value="${contact.contacts_id}">-->
                        </div>
                        <div class="form-group">
                            <label for="up-name">姓名</label>
                            <input type="text" class="form-control" id="up-name" name="upName">
                        </div>
                        <div class="form-group">
                            <label for="up-phone">电话</label>
                            <input type="text" class="form-control" id="up-phone" name="upPhone">
                        </div>
                        <div class="form-group">
                            <label for="up-email">邮箱</label>
                            <input type="text" class="form-control" id="up-email" name="upEmail">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success">保存修改</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框 -> 删除联系人 -->
    <div class="modal fade" id="deleteContact">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    删除
                </div>
                <div class="modal-body">
                    是否要删除此联系人
                    <form></form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-danger">删除</button>
                </div>
            </div>
        </div>
    </div>
    <!--  模态框 -> 新建联系人  -->
    <div class="modal fade" id="newContact">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新建联系人</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" th:action="@{/insert}" method="post">
                        <div class="form-group">
                            <input type="hidden" class="form-control" id="co-id" name="coId"
                                   th:value="${session.userinfo.userinfo_id}">
                        </div>
                        <div class="form-group">
                            <label for="co-name">姓名</label>
                            <input type="text" class="form-control" id="co-name" name="coName">
                        </div>
                        <div class="form-group">
                            <label for="co-phone">电话</label>
                            <input type="text" class="form-control" id="co-phone" name="coPhone">
                        </div>
                        <div class="form-group">
                            <label for="co-email">邮箱</label>
                            <input type="text" class="form-control" id="co-email" name="coEmail">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!--  模态框 -> 修改密码  -->
    <div class="modal fade" id="updatePassword">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改密码</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" th:action="@{/updateUser}" method="post">
                        <div class="form-group">
                            <input type="hidden" class="form-control" name="uUserid"
                                   th:value="${session.userinfo.userinfo_id}">
                        </div>
                        <div class="form-group">
                            <label for="u-username">账号</label>
                            <input type="text" class="form-control" id="u-username" name="uUsername"
                                   th:value="${session.userinfo.username}" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label for="u-password">密码</label>
                            <input type="text" class="form-control" id="u-password" name="uPassword">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success">保存修改</button>
                </div>
            </div>
        </div>
    </div>
    <!--  模态框 -> 退出登录  -->
    <div class="modal fade" id="sign_out">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Are you sure ?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    是否确定退出登录？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a type="button" class="btn btn-danger" href="#" th:href="@{/signOut}">
                        Exit
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="about">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="aboutModalLabel">关于</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                    <h4>这是一个课程设计</h4>
                    </p>
                    <p><img loading="eager" th:src="@{/img/banner.png}" src="../static/img/banner.png" alt="Twinkle"
                            title="Twinkle"></p>
                    <p>
                        开源协议：<a
                            href="https://gitee.com/wanghlme/abms-spring-boot2/blob/master/LICENSE">GPL-2.0</a>
                        <br/>
                        Gitee主页：<a href="https://gitee.com/wanghlme">https://gitee.com/wanghlme</a>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">CLose</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
